// Amaze UI Mobile: Animations
// =============================================================================

// Spin
// -----------------------------------------------------------------------------

@keyframes amt-spin {
  to {
    transform: rotate(360deg);
  }
}


// Fade
// -----------------------------------------------------------------------------

@keyframes amt-fade-in  {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes amt-fade-out {
  to {
    opacity: 0;
  }
}


// Slide Animations
// -----------------------------------------------------------------------------

// Slide top
@keyframes amt-slide-top {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

// Slide bottom
@keyframes amt-slide-bottom {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

// Slide left
@keyframes amt-slide-left {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes amt-slide-top-fixed {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

// Slide bottom fixed
@keyframes amt-slide-bottom-fixed {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


// Shake
// -----------------------------------------------------------------------------

@keyframes amt-shake {
  0%, 100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-9px);
  }
  20% {
    transform: translateX(8px);
  }
  30% {
    transform: translateX(-7px);
  }
  40% {
    transform: translateX(6px);
  }
  50% {
    transform: translateX(-5px);
  }
  60% {
    transform: translateX(4px);
  }
  70% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
  90% {
    transform: translateX(-1px);
  }
}


// Scale Animations
// -----------------------------------------------------------------------------

// Scale up
@keyframes amt-scale-up {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

// Scale down
@keyframes amt-scale-down {
  0% {
    opacity: 0;
    transform: scale(1.8);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}


// Classes
// -----------------------------------------------------------------------------

//@see http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css
//@see http://davidwalsh.name/translate3d

[class*="animation-"] {
  animation-duration: .3s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;

  @extend %force-hardware-acceleration;
}

@each $animation in (
  spin,
  fade-in,
  fade-out,
  slide-top,
  slide-bottom,
  slide-left,
  slide-right,
  slide-top-fixed
  slide-bottom-fixed
  scale-up,
  scale-down) {

  .#{$namespace}animation-#{$animation} {
    animation-name: unquote("amt-#{$animation}");
  }
}
